tags: iThome 鐵人賽 30天

什麼是生命週期？像是Component的首次呼叫與離開都是生命週期的其中一環，其中也包括props和state的變化。

參考資料：A Deep Dive into React Lifecycle Methods

coponentDidMount

用法：

componentDidMount() {
// 呼叫第一次進入component的事件
}

componentDidMount用於呼叫第一次進入component的事件，不過在這之前會先經過昨天講的constructor，並會renderhtml內容並update至React DOM內，之後才會呼叫componentDidMountcomponent的第一個事件。

componentDidUpdate

用法：

componentDidUpdate(prevProps, prevState) {
// 當props、state更新會呼叫的事件
}

componentDidUpdate是在props與state更新時會觸發的事件，但在使用上需要特別特別的小心，以免發生危險，造成無窮迴圈。值得注意的是裡面會有兩個參數prevProps、prevState，這兩個參數的意思是上一次更新前props與state的狀態 (及上一次的數值)，可以幫助我們來管控好componentDidUpdate，以下舉個例子會造成無窮迴圈的狀況。

constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
 }

componentDidUpdate(prevProps, prevState) {
    // 當只要一改變count的數值進到didUpdate集會造成無窮迴圈
    this.setState({count: 0})
}

這時只要點選Header的數字，就會報出錯誤，原因很簡單，因為在didUpdate內更改數值後會再次觸發didUpdate，所以就開始無限循環了。

那要如何避免呢？

componentDidUpdate(prevProps, prevState) {
    if(prevState.count != this.state.count)
        this.setState({count: 0})
}

這時候雖然不管怎麼按數字都不會+1，但是並不會造成迴圈，所以在寫didUpdate時千萬要特別注意可能造成迴圈的狀況。

componentWillUnmount

componentWillUnmount() {
    // 當component要消失時會觸發
}

這個事件比較常用在監聽事件或者是setInterval上，因為離開後就沒有要做監聽或重複呼叫函式，所以為了避免資源浪費與不必要的錯誤需把在狀態清除掉。

範例：

componentDidMount() {
    window.addEventListener('keydown', this.onKeyDown)
}

onKeyDown(e){
    console.log('按下了鍵盤！')
}

componentWillUnmount(){
    window.removeEventListener('keydown', this.onKeyDown)
}

有了componentWillUnmount，就不怕component消失還在持續監聽或執行事件了。

後記

基本上React的生命週期事件就是這三個，雖然還是有其他的，但其實只要管控的好基本上是用不到的，當程式發現越寫越複雜時可以先檢查一下自己的邏輯，看看有那些地方是可以改善的喔！

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)